<template>
  <a-modal width="30%" v-bind:visible="isShowAdd" :title="title" @ok="onOk" @cancel="onCancel">
    <a-form-model ref="formRef" :model="form" :rules="formRule" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="礼包名称" prop="name">
        <a-input placeholder="请输入礼包名称" v-model="form.name"></a-input>
      </a-form-model-item>
      <a-form-model-item label="礼包介绍" prop="introduce">
        <a-textarea v-model="form.introduce" placeholder="请输入礼包介绍" :rows="4" />
      </a-form-model-item>
      <a-form-model-item label="购买金额" prop="money">
        <a-input-number placeholder="请输入购买金额" style="width: 100%" id="inputNumber" v-model="form.money" />
      </a-form-model-item>
      <a-form-model-item label="上传图片">
        <upImages :url.sync="form.url"></upImages>
      </a-form-model-item>
      <a-form-model-item label="礼包图片地址">
        <a-input v-model="form.url"></a-input>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { addDebtListAPI, editDebtListAPI } from '@/api/product.js'
import { format } from 'date-fns'
export default {
  name: 'AddDebt',
  props: {
    isShowAdd: {
      type: Boolean,
      default: false
    },
    object: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    isShowAdd(boolean) {
      if (boolean) {
        this.title = '新增'
        if (Object.values(this.object).length > 0) {
          console.log(this.object)
          this.form.ids = this.object.id
          this.form.introduce = this.object.introduce
          this.form.money = this.object.money
          this.form.name = this.object.name
          this.form.url = this.object.url
        }
      } else {
        this.form = {
          brand_id: process.env.VUE_APP_BRAND_ID,
          ctime: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
          id: '',
          introduce: '',
          money: '',
          name: '',
          url: '',
          utime: format(new Date(), 'yyyy-MM-dd HH:mm:ss')
        }
        this.$emit('update:object', {})
      }
    }
  },
  data() {
    return {
      title: '新增',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      form: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        ctime: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
        ids: '',
        introduce: '',
        money: '',
        name: '',
        url: '',
        utime: format(new Date(), 'yyyy-MM-dd HH:mm:ss')
      },
      formRule: {
        name: [
          {
            required: true,
            message: '请输入礼包名称'
          }
        ],
        introduce: [
          {
            required: true,
            message: '请输入礼包介绍'
          }
        ],
        money: [
          {
            required: true,
            message: '请输入购买金额'
          }
        ]
      }
    }
  },
  methods: {
    onOk() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        try {
          if (Object.values(this.object).length > 0) {
            await editDebtListAPI(this.form)
          } else {
            await addDebtListAPI(this.form)
          }
          this.$emit('upload')
          this.$message.success('操作成功')
          this.$emit('update:isShowAdd', false)
          this.$emit('update:object', {})
        } catch (error) {
          this.$message.error(error.data.msg)
        }
      })
    },
    onCancel() {
      this.$emit('update:isShowAdd', false)
      this.$emit('update:object', {})
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-form-item {
  margin-bottom: 0px;
}
</style>
